<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./Templates/TemplateLogin.xhtml"
                xmlns:p="http://primefaces.org/ui"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core">


    <ui:define name="top">
        <h:form>
            <p:commandLink id="LinkMedico" onclick="PF('wdlgLoginAdministrador').show()" action="#{loginController.setIsAdministrador(true)}" style="float: right">
                <h:outputText value="Administración" />  
            </p:commandLink>  
        </h:form>
        <p:graphicImage  value="/resources/images/banner_1.jpg" style="width: 100%"/>
    </ui:define>

    <ui:define name="content" >

        <p:growl id="growl" showDetail="true" life="2000" autoUpdate="true"/>

        <center>         
            <br/>
            <p:outputLabel value="Bienvenido al Sistema Médico de la Clínica Riobamba" style="font-size: 30px;color: cornflowerblue"/>
            <br/>
            <br/>
            <h:form id="formLogin" style="width:350px" >                                 

                <p:panel header="Ingresar al sistema:" >                    
                    <p:commandLink id="LinkMedico" onclick="PF('wdlgLoginMedico').show()" action="#{loginController.setIsMedico(true)}">  
                        <p:graphicImage value="/resources/images/dr-icon.png" width="40px" height="30px" />
                        <h:outputText value="Médico" />  
                    </p:commandLink>  
                    <br/><br/>
                    <p:commandLink id="LinkPaciente" onclick="PF('wdlgLoginMedico').show()" action="#{loginController.setIsMedico(false)}">  
                        <p:graphicImage value="/resources/images/patient-icon.jpg" width="40px" height="30px" />
                        <h:outputText value="Paciente" />  
                    </p:commandLink>

                </p:panel>

            </h:form>
        </center>                

        <p:ajaxStatus style="width:64px;height:64px;position:fixed;right:5px;bottom:5px">  
            <f:facet name="start">  
                <p:graphicImage value="/resources/images/loading.gif" />  
            </f:facet>  

            <f:facet name="complete">  
                <h:outputText value="" />  
            </f:facet>  
        </p:ajaxStatus> 
    </ui:define>

    <ui:define name="dialogos">
        <p:dialog id="dlgLoginMedico" widgetVar="wdlgLoginMedico"
                  header="Autenticación" closable="true" resizable="false" draggable="false" modal="true">
            <h:form id="formLoginMedico">                 
                <h:panelGrid columns="2" cellpadding="5"  >
                    <h:outputLabel for="username" value="Usuario:"/>
                    <p:inputMask value="#{loginController.usuario}"
                                 id="username" required="true" requiredMessage="Se requiere un usuario" label="username" mask="9999999999"/>

                    <h:outputLabel for="password" value="Contraseña:" />
                    <p:password value="#{loginController.contraseña}"
                                id="password" required="true" requiredMessage="Se requiere una contraseña" label="password" />

                    <f:facet name="footer">
                        <center>
                            <p:commandButton id="loginButton" value="Ingresar" update=":growl"
                                             action ="#{loginController.login}"
                                             />
                        </center>
                    </f:facet>

                </h:panelGrid>
            </h:form>
        </p:dialog>

        <p:dialog id="dlgLoginAdministrador" widgetVar="wdlgLoginAdministrador"
                  header="Autenticación" closable="true" resizable="false" draggable="false" modal="true">
            <h:form id="formLoginAdministrador">                 
                <h:panelGrid columns="2" cellpadding="5"  >
                    <h:outputLabel for="username" value="Usuario:"/>
                    <p:inputText value="#{loginController.usuario}"
                                 id="usrname" required="true" requiredMessage="Es necesario el usuario" label="username"/>

                    <h:outputLabel for="password" value="Contraseña:" />
                    <p:password value="#{loginController.contraseña}"
                                id="pass" required="true" requiredMessage="Es necesaria la contraseña" label="password" />

                    <f:facet name="footer">
                        <center>
                            <p:commandButton id="loginBtn" value="Ingresar" update=":growl"
                                             action ="#{loginController.login}"
                                             />
                        </center>
                    </f:facet>

                </h:panelGrid>
            </h:form>
        </p:dialog>
    </ui:define>

</ui:composition>
